<template>
  <div class="educational-center-page">
    <!-- 页面头部信息 -->
    <div class="page-header">
      <van-cell-group inset>
        <van-cell>
          <template #title>
            <div class="header-content">
              <van-icon name="school-o" size="24" color="#1976d2" />
              <span class="header-title">教务中心</span>
            </div>
          </template>
          <template #label>
            <div class="header-desc">
              广州南洋理工职业学院教学综合信息服务平台
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 网络检测状态 -->
    <div class="network-status">
      <van-cell-group inset>
        <van-cell>
          <template #title>
            <div class="status-content">
              <van-loading v-if="isChecking" size="16" color="#1976d2" />
              <van-icon 
                v-else-if="networkStatus === 'success'" 
                name="success" 
                size="16" 
                color="#07c160" 
              />
              <van-icon 
                v-else-if="networkStatus === 'failed'" 
                name="cross" 
                size="16" 
                color="#ee0a24" 
              />
              <van-icon
                v-else-if="networkStatus === 'firefox'"
                name="warning-o"
                size="16"
                color="#ff976a"
              />
              <van-icon
                v-else-if="networkStatus === 'https_blocked'"
                name="info-o"
                size="16"
                color="#1989fa"
              />
              <van-icon 
                v-else 
                name="question-o" 
                size="16" 
                color="#969799" 
              />
              <span class="status-text">{{ statusText }}</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <van-cell-group inset>
        <van-cell>
          <template #title>
            <div class="action-content">
              <van-button 
                type="primary" 
                size="large" 
                block
                :loading="isChecking"
                :disabled="networkStatus === 'failed'"
                @click="handleAccessEducationalSystem"
              >
                {{ buttonText }}
              </van-button>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 重新检测按钮 -->
    <div class="retry-section" v-if="networkStatus === 'failed'">
      <van-cell-group inset>
        <van-cell>
          <template #title>
            <div class="retry-content">
              <van-button 
                type="default" 
                size="large" 
                block
                :loading="isChecking"
                @click="checkNetworkAccess"
              >
                重新检测网络
              </van-button>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 帮助信息 -->
    <div class="help-section">
      <van-cell-group inset>
        <van-cell title="使用说明" is-link @click="showHelpDialog = true" />
      </van-cell-group>
    </div>

    <!-- 帮助对话框 -->
    <van-dialog
      v-model:show="showHelpDialog"
      title="使用说明"
      :show-cancel-button="false"
      confirm-button-text="我知道了"
    >
      <div class="help-content">
        <p><strong>访问要求：</strong></p>
        <p>• 必须连接校园网络</p>
        <p>• 仅限校内IP地址访问</p>
        <p>• 需要有效的学生或教师账号</p>
        <br>
        <p><strong>如果无法访问：</strong></p>
        <p>• 请确认已连接校园WiFi</p>
        <p>• 检查网络连接是否正常</p>
        <p>• 联系网络中心或教务处</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { showToast, showConfirmDialog } from 'vant'

// 封装Toast显示函数
const showSuccessToast = (message) => {
  showToast({
    type: 'success',
    message: message
  })
}

const showFailToast = (message) => {
  showToast({
    type: 'fail',
    message: message
  })
}

// 响应式数据
const isChecking = ref(false)
const networkStatus = ref('unknown') // 'unknown', 'checking', 'success', 'failed', 'firefox', 'https_blocked'
const showHelpDialog = ref(false)

// 教务系统目标地址
const EDUCATIONAL_SYSTEM_URL = 'http://192.168.1.111/xtgl/login_slogin.html'
const TARGET_IDENTIFIER = '<span id="xtmc">广州南洋理工职业学院教学综合信息服务平台</span>'

// 计算属性
const statusText = computed(() => {
  switch (networkStatus.value) {
    case 'checking':
      return '正在检测网络连接...'
    case 'success':
      return '网络连接正常，可以访问教务系统'
    case 'failed':
      return '仅校内用户连接校园网后才可访问'
    case 'firefox':
      return 'Firefox浏览器不支持访问校内HTTP资源'
    case 'https_blocked':
      return 'HTTPS环境下无法直接检测，请手动确认校园网连接'
    default:
      return '点击下方按钮检测网络连接'
  }
})

const buttonText = computed(() => {
  if (isChecking.value) {
    return '检测中...'
  }
  if (networkStatus.value === 'success') {
    return '进入教务系统'
  }
  if (networkStatus.value === 'failed') {
    return '网络不可达'
  }
  if (networkStatus.value === 'firefox') {
    return '浏览器不兼容'
  }
  if (networkStatus.value === 'https_blocked') {
    return '尝试访问教务系统'
  }
  return '检测并访问教务系统'
})

// 检测浏览器类型和混合内容支持
const getBrowserInfo = () => {
  const userAgent = navigator.userAgent.toLowerCase()
  const isFirefox = userAgent.includes('firefox')
  const isChrome = userAgent.includes('chrome') && !userAgent.includes('edge')
  const isEdge = userAgent.includes('edge')
  const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome')

  // 检测是否为HTTPS环境
  const isHttps = window.location.protocol === 'https:'

  return {
    isFirefox,
    isChrome,
    isEdge,
    isSafari,
    isHttps,
    supportsMixedContent: !isFirefox && isHttps // Firefox在HTTPS下不支持混合内容
  }
}

// 检测网络访问
const checkNetworkAccess = async () => {
  isChecking.value = true
  networkStatus.value = 'checking'

  const browserInfo = getBrowserInfo()

  // 如果是HTTPS环境下的Firefox浏览器，提供特殊处理
  if (browserInfo.isHttps && browserInfo.isFirefox) {
    networkStatus.value = 'firefox'
    isChecking.value = false
    showToast({
      message: 'Firefox浏览器在HTTPS环境下不支持访问HTTP资源，建议使用Chrome或Edge浏览器',
      duration: 4000
    })
    return
  }

  try {
    // 使用多种方法检测网络连接
    const result = await testNetworkConnection(browserInfo)

    if (result === 'https_blocked') {
      networkStatus.value = 'https_blocked'
      showToast({
        message: 'HTTPS环境下无法直接检测，请确认已连接校园网',
        duration: 3000
      })
    } else if (result === true) {
      networkStatus.value = 'success'
      showSuccessToast('网络连接检测成功')
    } else {
      networkStatus.value = 'failed'
      showFailToast('网络连接检测失败')
    }
  } catch (error) {
    console.error('网络检测错误:', error)
    networkStatus.value = 'failed'
    showFailToast('网络连接检测失败')
  } finally {
    isChecking.value = false
  }
}

// 测试网络连接的多种方法
const testNetworkConnection = async (browserInfo) => {
  console.log('开始网络连接测试，浏览器信息:', browserInfo)

  // 在HTTPS环境下，直接跳过所有HTTP请求检测
  if (browserInfo.isHttps) {
    console.log('HTTPS环境下，所有HTTP请求都会被阻止，使用特殊状态')
    await testCampusNetworkIndicators() // 仍然执行检测，但不依赖结果
    // 在HTTPS环境下，即使检测失败也返回特殊状态，让用户手动尝试
    return 'https_blocked'
  }

  // 只有在HTTP环境下才尝试直接请求
  try {
    const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 3000) // 3秒超时，移动端网络环境

    const response = await fetch(EDUCATIONAL_SYSTEM_URL, {
      method: 'HEAD',
      mode: 'no-cors', // 避免CORS问题
      signal: controller.signal,
      cache: 'no-cache' // 避免缓存影响检测结果
    })

    clearTimeout(timeoutId)
    console.log('Fetch请求成功，响应状态:', response.status, response.type)
    return true // 如果没有抛出异常，说明网络可达
  } catch (error) {
    console.log('Fetch方法检测失败:', error.name, error.message)

    // 如果是AbortError，说明超时，网络可能不可达
    if (error.name === 'AbortError') {
      console.log('请求超时，网络可能不可达')
      return false
    }

    // 403、404、500等HTTP错误实际上表明服务器可达，只是拒绝了请求或有其他问题
    if (error.message && (error.message.includes('403') || error.message.includes('404') || error.message.includes('500'))) {
      console.log('收到HTTP错误响应，说明服务器可达:', error.message)
      return true
    }

    // 网络错误（如ERR_NETWORK_CHANGED, ERR_INTERNET_DISCONNECTED等）才表示真正的网络问题
    if (error.message && (error.message.includes('ERR_NETWORK') || error.message.includes('ERR_INTERNET'))) {
      console.log('检测到网络连接问题:', error.message)
      return false
    }

    return false
  }

  // 如果到这里说明是HTTP环境，但前面的检测都失败了
  return false
}



// 测试校园网指示器（通过检测已知的校园网特征）
const testCampusNetworkIndicators = async () => {
  try {
    console.log('开始校园网环境检测...')

    // 方法1: 检测用户IP是否在校园网段内（通过公共API）
    try {
      const ipInfo = await fetch('https://api.ipify.org?format=json', {
        timeout: 5000
      }).then(response => response.json())

      if (ipInfo && ipInfo.ip) {
        console.log('用户公网IP地址:', ipInfo.ip)

        // 检查是否为内网IP（如果获取到的是内网IP，说明在NAT环境下）
        const ip = ipInfo.ip
        const isPrivateIP =
          ip.startsWith('192.168.') ||
          ip.startsWith('10.') ||
          (ip.startsWith('172.') && parseInt(ip.split('.')[1]) >= 16 && parseInt(ip.split('.')[1]) <= 31)

        if (isPrivateIP) {
          console.log('检测到内网IP，很可能在校园网内')
          return true
        }

        // 检查是否为学校的公网IP段（如果知道学校的IP段）
        // 这里可以根据实际情况添加学校的IP段检测
        console.log('检测到公网IP，可能不在校园网内')
      }
    } catch (error) {
      console.log('IP检测失败:', error)
    }

    // 方法2: 检测网络延迟特征和连通性
    try {
      const startTime = performance.now()
      await fetch('https://www.baidu.com/favicon.ico', {
        method: 'HEAD',
        mode: 'no-cors',
        cache: 'no-cache'
      })
      const endTime = performance.now()
      const latency = endTime - startTime

      console.log('网络延迟:', latency, 'ms')

      // 校园网通常有较低的延迟到国内网站
      if (latency < 100) {
        console.log('检测到较低延迟，可能在校园网内')
        // 但仅凭延迟不足以确定，需要结合其他因素
      }
    } catch (error) {
      console.log('延迟检测失败:', error)
    }

    // 方法3: 在HTTPS环境下，我们采用保守策略
    // 由于无法直接检测HTTP资源，我们提示用户手动确认
    console.log('HTTPS环境下无法直接检测教务系统，建议用户手动确认')

    // 返回false，让用户手动选择
    return false

  } catch (error) {
    console.log('校园网指示器检测失败:', error)
    return false
  }
}



// 处理访问教务系统
const handleAccessEducationalSystem = async () => {
  if (networkStatus.value === 'unknown') {
    // 如果还没有检测过，先进行检测
    await checkNetworkAccess()

    // 检测成功后再次调用此函数
    if (networkStatus.value === 'success') {
      handleAccessEducationalSystem()
    }
    return
  }

  if (networkStatus.value === 'success') {
    // 显示确认对话框
    try {
      await showConfirmDialog({
        title: '即将跳转',
        message: '将要跳转到教务系统登录页面，请使用您的学号/工号和密码登录。',
        confirmButtonText: '确认跳转',
        cancelButtonText: '取消'
      })

      // 用户确认后跳转
      window.open(EDUCATIONAL_SYSTEM_URL, '_blank')
      showSuccessToast('正在跳转到教务系统')
    } catch (error) {
      // 用户取消了跳转
      console.log('用户取消跳转')
    }
  } else if (networkStatus.value === 'failed') {
    showFailToast('网络不可达，请连接校园网后重试')
  } else if (networkStatus.value === 'https_blocked') {
    // HTTPS环境下的特殊处理
    try {
      await showConfirmDialog({
        title: '安全提示',
        message: 'HTTPS环境下无法直接检测教务系统连通性。\n\n如果您已连接校园网，点击"确认访问"将尝试打开教务系统。\n\n如果未连接校园网，请先连接校园WiFi。',
        confirmButtonText: '确认访问',
        cancelButtonText: '取消'
      })

      // 用户确认后跳转
      window.open(EDUCATIONAL_SYSTEM_URL, '_blank')
      showSuccessToast('正在跳转到教务系统')
    } catch (error) {
      console.log('用户取消访问')
    }
  } else if (networkStatus.value === 'firefox') {
    // Firefox浏览器的特殊处理
    try {
      await showConfirmDialog({
        title: '浏览器兼容性提示',
        message: 'Firefox浏览器在HTTPS环境下不支持访问HTTP资源，这是出于安全考虑。\n\n解决方案：\n1. 推荐使用Chrome或Edge浏览器\n2. 或复制以下地址到浏览器地址栏直接访问：\n' + EDUCATIONAL_SYSTEM_URL,
        confirmButtonText: '复制地址',
        cancelButtonText: '我知道了'
      })

      // 用户选择复制地址
      if (navigator.clipboard) {
        await navigator.clipboard.writeText(EDUCATIONAL_SYSTEM_URL)
        showSuccessToast('地址已复制到剪贴板')
      } else {
        // 降级方案
        const textArea = document.createElement('textarea')
        textArea.value = EDUCATIONAL_SYSTEM_URL
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        showSuccessToast('地址已复制到剪贴板')
      }
    } catch (error) {
      console.log('用户取消了操作')
    }
  }
}

// 组件挂载时自动检测网络
onMounted(() => {
  // 延迟500ms后自动检测，给用户一个缓冲时间
  setTimeout(() => {
    checkNetworkAccess()
  }, 500)

  // 监听网络状态变化
  window.addEventListener('online', handleNetworkChange)
  window.addEventListener('offline', handleNetworkChange)
})

// 处理网络状态变化
const handleNetworkChange = () => {
  if (navigator.onLine) {
    showToast('网络已连接，正在重新检测...')
    setTimeout(() => {
      checkNetworkAccess()
    }, 1000)
  } else {
    networkStatus.value = 'failed'
    showFailToast('网络连接已断开')
  }
}

// 组件卸载时清理事件监听器
onUnmounted(() => {
  window.removeEventListener('online', handleNetworkChange)
  window.removeEventListener('offline', handleNetworkChange)
})
</script>

<style scoped>
.educational-center-page {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 16px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

.header-desc {
  font-size: 14px;
  color: #969799;
  margin-top: 4px;
}

.network-status {
  margin-bottom: 16px;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-text {
  font-size: 14px;
  color: #323233;
}

.action-section {
  margin-bottom: 16px;
}

.action-content,
.retry-content {
  width: 100%;
}

.retry-section {
  margin-bottom: 16px;
}

.help-section {
  margin-bottom: 16px;
}

.help-content {
  padding: 16px;
  text-align: left;
  line-height: 1.6;
}

.help-content p {
  margin: 4px 0;
  font-size: 14px;
  color: #323233;
}

.help-content strong {
  color: #1976d2;
}
</style>
